<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滑动导航显示</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .banner {
        width: 1200px;
        margin: auto;
    }

    .banner .nav {
        width: 100%;
        height: 100px;
        background-color: #d7b3e3;
    }

    .banner .content,
    .mue,
    .list,
    .shopping {
        /* width: 100%; */
        height: 500px;
        padding: 300px;
        /*padding 为 offsetHeight 结果 */
        /* box-sizing: border-box; */
        font-size: 30px;
        background-color: #f9bccc;
    }

    .banner .list {
        background-color: #91defe;
    }

    .banner .mue {
        background-color: #bdb6ec;
    }

    .banner .shopping {
        background-color: aliceblue;
    }

    .banner .hangLable {
        display: none;
        width: 150px;
        height: 400px;
        background-color: #91defe;
        position: absolute;
        right: 100px;
        z-index: 555;
    }

    .hangLable ul li {
        width: 100px;
        height: 75px;
        line-height: 75px;
        margin: auto;
        margin-top: 3px;
        font-size: 20px;
        text-align: center;
        background-color: #bdb6ec;
    }

    html {
        scroll-behavior: smooth;   
        /*  滚动  动画 */
    }
</style>

<body>
    <div class="banner">
        <div class="nav">
            I`im nav
        </div>
        <div class="content">
            我是 content
        </div>
        <div class="list">
            list
        </div>
        <div class="mue">
            mue
        </div>
        <div class="shopping">
            shopping
        </div>
        <div class="hangLable">
            <ul>
                <li>列&nbsp;&nbsp;&nbsp;&nbsp;表</li>
                <li>清&nbsp;&nbsp;&nbsp;&nbsp;单</li>
                <li>购&nbsp;&nbsp;&nbsp;&nbsp;物</li>
                <li>查&nbsp;&nbsp;&nbsp;&nbsp;看</li>
                <li>顶&nbsp;&nbsp;&nbsp;&nbsp;部</li>
            </ul>
        </div>
    </div>
</body>
<script>
    var nav = document.querySelector('.nav')
    var hang = document.querySelector('.hangLable')
    var lis = document.querySelectorAll('.hangLable>ul>li')
    var list = document.querySelector('.list')
    var mue = document.querySelector('.mue')
    var shopping = document.querySelector('.shopping')
    // console.log(lis[4]);

    var listH = list.offsetTop;
    var mueH = mue.offsetHeight;
    var shoppingH = shopping.offsetTop;
    console.log(mueH);


    document.onscroll = function () {

        var y = window.pageXOffset;
        var y1 = document.documentElement.scrollTop
        console.log(y, y1);

        if (y1 >= 400 && y1 < listH) {
            hang.style.display = 'block'
            hang.style.position = 'absolute'
            hang.style.top = '1200px'
            lis[4].style.display = 'none'
        } else if (y1 >= listH && y1 < 2100) {
            nav.style.position = 'fixed'
            nav.style.top = '0'

            hang.style.position = 'fixed'
            hang.style.top = '200px'
            lis[4].style.display = 'none'
        } else if (y1 >= 2100) {
            hang.style.position = 'fixed'
            hang.style.top = '200px'
            lis[4].style.display = 'block'
        } else {
            nav.style.position = ''

            hang.style.position = 'absolute'
            hang.style.display = 'none'
            hang.style.top = '1200px'
            lis[4].style.display = 'none'
        }




        lis[4].onclick = function () {
            document.documentElement.scrollTop = 0;
        }
        lis[1].onclick = function () {
            document.documentElement.scrollTop = mueH;
        }
    }

</script>

</html>